<template>
  <div class="nianbiao">
    <el-dialog title="原始测量数据" :visible.sync="dialogCrossDataVisible" :modal="false" width="50vw">
      <div class="demo-input-suffix">
        <el-input class="custom-input" placeholder="请输入年份/STD/RES/ARS/样本是" prefix-icon="el-icon-search"
          >
        </el-input>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" icon="el-icon-download">下载</el-button>
        <el-button type="primary" icon="el-icon-printer">打印</el-button>
        <!-- 添加两个并列的虚线框 -->
        <div class="dashed-boxes">
          <div class="dashed-box">
            <span class="box-title">表格数据</span>
            <el-table :data="formData" :show-header="false" height="500px" border style="width: 100%"
              :default-sort="{ prop: 'year', order: 'descending' }">
              <el-table-column prop="year" label="年份" sortable width="180">
              </el-table-column>
              <el-table-column prop="std" label="STD" sortable width="180">
              </el-table-column>
              <el-table-column prop="res" label="RES" sortable>
              </el-table-column>
              <el-table-column prop="aes" label="AES" sortable>
              </el-table-column>
              <el-table-column prop="sampleSize" label="样本量" sortable>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="dashed-box">
            <span class="box-title">统计数据</span>
            
          </div> -->
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogCrossDataVisible: true,
      formData: [{
        year: '2016-05-03',
        std: '1.276',
        res: '2.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '4.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '8.276',
        res: '5.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '3.276',
        res: '7.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '5.276',
        res: '2.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '2.276',
        res: '3.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
       {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
    ]
    }
  },
  methods: {
    showRawData() {
      this.dialogCrossDataVisible = true;
    },
  }
}
</script>

<style scoped>
/* .nianbiao{
  position:absolute;
  z-index: 1000;
} */
.text {
  font-size: 16px;
  display: flex;
  border: 1px solid #ddd;
  margin-top: 15px;
}

.text .left,
.text .right {
  width: 50%;
  padding: 10px;
}

.text .left .item {
  margin: 0;
}

.text .right img {
  width: 100%;
  height: auto;
}

.card-footer button {
  font-size: 16px;
  /* 调整按钮文字大小 */
  margin: 0 10px;
}

.custom-input {
  width: 40%;
  /* 设置宽度为父容器的40% */
  margin-right: 10px;
  /* 添加右侧的间距 */
}

/* 虚线框容器样式，包含两个框并列 */
.dashed-boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* 每个虚线框样式 */
.dashed-box {
  width: 100%;
  /* 每个框占宽度的48%，使它们并列 */
  border: 1px dashed #ccc;
  /* 设置虚线边框 */
  padding: 10px;
  position: relative;
}

/* 虚线框标题样式 */
.box-title {
  position: absolute;
  top: -12px;
  left: 10px;
  background-color: white;
  padding: 0 5px;
  font-size: 14px;
  color: #333;
}
/deep/.el-dialog__header {
  height: 27px;
  background-color: rgb(7, 46, 82) !important;
}

/deep/.el-dialog__title {
  color: white !important;
  font-size: 24px;
}

/deep/.el-dialog__close {
  font-size: 24px !important;
  /* 增大关闭按钮字体大小 */
}
</style>